<!--
 * @Author: qwlbwm 18370818801qwl./
 * @Date: 2023-09-06 13:36:58
 * @LastEditors: whereamazinghappen 306702547@qq.com
 * @LastEditTime: 2023-09-23 15:56:33
 * @FilePath: \checc-business-module-web-kgpt-dev\src\views\examineManage\components\editAddStandardIndex.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 标准指标库的新增（包括中交和中咨） -->
  <div>
    <el-dialog
      v-model="dialogVisible"
      :show-close="false"
      width="800px"
      :title="opType == 'add' ? '新增' : '编辑'"
      :before-close="beforeClose"
    >
      <div class="examine-dialog-content">
        <el-form
          :model="myForm"
          ref="ruleFormRef"
          :rules="rules"
          label-width="90px"
        >
          <el-divider content-position="left">基本信息</el-divider>
          <el-row gutter="20">
            <el-col :span="12">
              <el-form-item label="考核名称" prop="name">
                <el-input
                  v-model="myForm.name"
                  maxlength="20"
                  clearable
                  size="small"
                  style="width: 240px"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年度" prop="age">
                <el-date-picker
                  v-model="myForm.age"
                  type="year"
                  value-format="YYYY"
                  placeholder="选择年份"
                  style="width: 240px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <template v-if="standardType === '1'">
            <div class="scoreWrap">评分换算(H、M、L)</div>
            <el-row gutter="20">
              <el-col :span="12">
                <el-row>
                  <el-form-item required label="M=H" prop="meFormula_operator">
                    <el-select
                      v-model="myForm.meFormula_operator"
                      placeholder="符号"
                      clearable
                      style="width: 80px; margin-right: 10px"
                      size="small"
                    >
                      <el-option
                        v-for="item in dict_operatorlist"
                        :key="item.itemValue"
                        :label="item.itemText"
                        :value="item.itemValue"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" prop="meFormula_num" label-width="0">
                    <el-input
                      v-model="myForm.meFormula_num"
                      style="width: 100px"
                      :min="0"
                      :max="99"
                      :maxlength="5"
                      oninput="value=value.replace(/[^\d.]/g, '')
                      .replace(/\.{2,}/g, '.')
                      .replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3')
                      .replace(/^\./g, '')
                      .replace(/^0+(\d+)/, '$1')
                      .replace(/^(\d{2})\d+$/, '$1')"
                    /><!--                   m   -->

                  </el-form-item>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-form-item required label="L=M" prop="lwFormula_operator">
                    <el-select
                      v-model="myForm.lwFormula_operator"
                      placeholder="符号"
                      clearable
                      style="width: 80px; margin-right: 10px"
                      size="small"
                    >
                      <el-option
                        v-for="item in dict_operatorlist"
                        :key="item.itemValue"
                        :label="item.itemText"
                        :value="item.itemValue"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" prop="lwFormula_num" label-width="0">
<!--                    <el-input-number
                      v-model="myForm.lwFormula_num"
                      style="width: 100px"
                      :controls="false"
                      :min="-99"
                      :max="99"
                    />-->
                    <el-input
                      v-model="myForm.lwFormula_num"
                      style="width: 100px"
                      :controls="false"
                      :min="0"
                      :max="99"
                      :maxlength="5"
                      oninput="value=value.replace(/[^\d.]/g, '')
                      .replace(/\.{2,}/g, '.')
                      .replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3')
                      .replace(/^\./g, '')
                      .replace(/^0+(\d+)/, '$1')
                      .replace(/^(\d{2})\d+$/, '$1')"

                    />
                  </el-form-item>
                </el-row>
              </el-col>
            </el-row>
          </template>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="myForm.remark" size="small"
                          autosize
                          type="textarea" maxlength="100"  show-word-limit />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" :loading="btnloading" @click="confirm()">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { computed, ref, defineComponent, reactive, watch, toRefs, nextTick } from "vue";
import { ElMessage } from "element-plus";
import * as api from "../../../api/examineManage";
import pubFc from "../../../utils";
// import { prop } from 'vue-class-component'
interface Params {
  id?: "";
  [propName: string]: any;
}
export default defineComponent({
  components: {},
  emits: {
    "update:visible": null,
    refresh: null,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    opType: {
      //操作类型新增或编辑
      type: String,
      default: "add",
    },
    standardType: {
      type: String, //1中交还是2中咨
      default: "1",
    },
    editForm: {
      type: Object, //1中交还是2中咨
    },
    dictDatas: {
      type: Object,
    },
  },
  setup(props, { emit }) {
    //表格用到的参数
    // let {standardType,opType}=props;
    const dialogVisible = computed(() => {
      return props.visible;
    });
    const ruleFormRef = ref<any>();
    const rules = reactive<any>({
      //   parentNumber: [{ required: true, message: '请选择父级', trigger: 'blur' }],
      name: [{ required: true, message: "请填写考核名称", trigger: "blur" }],
      // name: [{required: true, pattern: /^[\u4e00-\u9fa5]*$/, message: '只能输入汉字', trigger: 'blur' }],
      age: [{ required: true, message: "请填写年度", trigger: "blur" }],
      meFormula_operator: [{ required: true, message: "请选择", trigger: "change" }],
      meFormula_num: [{ required: true, message: "请填写", trigger: "blur" }],
      lwFormula_operator: [{ required: true, message: "请选择", trigger: "change" }],
      lwFormula_num: [{ required: true, message: "请填写", trigger: "blur" }],
      // remark: [{required: true, pattern: /^[\u4e00-\u9fa5]*$/, message: '只能输入汉字', trigger: 'blur' }]
    });
    const beforeClose = () => {
      cancel();
    };
    const state = reactive<any>({
      btnloading: false,
      dict_operatorlist: [
        {
          itemText: "乘以",
          itemValue: "*",
        },
        {
          itemText: "除以",
          itemValue: "/",
        },
      ], //运算符号列表
    });
    const backData = {
      name: "",
      age: "",
      meFormula: "",
      lwFormula: "",
      meFormula_operator: "",
      // meFormula_num: undefined,
      meFormula_num: 0.1,
      lwFormula_operator: "",
      // lwFormula_num: undefined,
      lwFormula_num: 0.1,
      remark: "",
    };
    // let myForm:any=null;
    const myForm = reactive<any>({ ...backData });

    watch(
      () => props.visible,
      (newval) => {
        if (newval) {
          nextTick(() => {
            ruleFormRef.value?.resetFields();
            pubFc.ojectCopyObj(myForm, backData);
            if (props.opType == "edit") {
              // console.log('props.editForm',props.editForm);
              pubFc.ojectCopyObj(myForm, props.editForm);
              if (props.standardType === "1") {
                dealFormula();
              }
            }
          });
        }
      }
    );

    const dealFormula = () => {
      //处理编辑时的公式
      let a = state.dict_operatorlist.find((it) => {
        return myForm.meFormula.includes(it.itemValue);
      });
      myForm.meFormula_operator = a ? a.itemValue : "";
      try {
        myForm.meFormula_num = parseFloat(
          myForm.meFormula.split(myForm.meFormula_operator)[1]
        );
      } catch {
        myForm.meFormula_num = null;
      }
      let b = state.dict_operatorlist.find((it) => {
        return myForm.lwFormula.includes(it.itemValue);
      });
      myForm.lwFormula_operator = b ? b.itemValue : "";
      try {
        myForm.lwFormula_num = parseFloat(
          myForm.lwFormula.split(myForm.lwFormula_operator)[1]
        );
      } catch {
        myForm.lwFormula_num = null;
      }
    };
    const cancel = () => {
      emit("update:visible", false);
    };
    const confirm = () => {
      //确定新增或修改
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          state.btnloading = true;
          dealParams();
          let apiName = "",
            params: Params = {
              ...myForm,
              id: "",
            };
          if (props.opType === "add" || props.opType === "copy") {
            apiName =
              props.standardType === "1" ? "addZjAnnualRequest" : "insertzzAnnualRequest";
            delete params.id;
          } else {
            apiName =
              props.standardType === "1" ? "editZjAnnualRequest" : "editzzAnnualRequest";
            params.id = props.editForm?.id;
          }
          params.meFormula = `H${myForm.meFormula_operator}${myForm.meFormula_num }`;
          params.lwFormula = `M${myForm.lwFormula_operator}${myForm.lwFormula_num}`;
          api[apiName](params)
            .then((res) => {
              state.btnloading = false;
              if (res.data.success) {
                ElMessage({
                  message: props.opType === "edit" ? "成功修改" : "成功创建",
                  type: "success",
                });
                cancel();
                emit("refresh");
              }
            })
            .catch(() => {
              state.btnloading = false;
            });
        }
      });
    };
    const dealParams = () => {
      //处理新增或编辑前的参数
      console.log("qw");
    };

    return {
      ...toRefs(state),
      myForm,
      dialogVisible,
      rules,
      ruleFormRef,
      beforeClose,
      cancel,
      confirm,
    };
  },
});
</script>
<style lang="scss" scoped>
.examine-dialog-content {
  padding: 20px;
}
.scoreWrap {
  margin-bottom: 20px;
  font-size: 16px;
}
</style>
